<template>
	<view class="page flex">
		<common-header title="浏览外部页面">
			<template #right>
				<view class="rightFlex flex" @tap="moreTap">
					<view class="view"></view>
					<view class="view"></view>
					<view class="view"></view>
				</view>
			</template>
		</common-header>
		<view class="webView flex" :url="url" :change:url="webView.urlChange"></view>
	</view>
</template>

<script setup>
	import { ref } from "vue";
	import { onLoad } from "@dcloudio/uni-app";
	
	// 接受上个页面传入的URL参数
	const url = ref("");
	onLoad((e) => {
		url.value = decodeURIComponent(decodeURIComponent(e.url));
	});
	
	// 点击右上角的方法
	function moreTap(){
		uni.showActionSheet({
			itemList: ["复制链接", "外部浏览器打开"],
			success(res) {
				if (res.tapIndex == 0) {
					uni.setClipboardData({
						data: url.value,
						success: function () {
							uni.showToast({ icon: "none", title: "复制成功", position: "center" });
						}
					});
				} else if (res.tapIndex == 1) {
					plus.runtime.openURL(encodeURI(url.value));
				}
			}
		});
	}
</script>

<script module="webView" lang="renderjs"> 
	export default {
		methods: {
			
			// URL发生改变
			urlChange(url){
				document.querySelector(".webView").innerHTML = `
					<iframe src='${url}' style="height: 0; flex: 1;border:0;"></iframe>
				`;
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	.page{
		height: 100vh;
		width: 100%;
		flex-direction: column;
		.rightFlex{
			flex-direction: column;
			align-items: center;
			justify-content: space-between;
			width: 30rpx;
			height: 26rpx;
			.view{
				height: 2rpx;
				width: 100%;
				background: #FFF;
				border-radius: 10rpx;
				&:nth-last-child(1){
					width: 60%;
					margin-right: 40%;
				}
			}
		}
		.webView{
			flex: 1;
			height: 0;
			flex-direction: column;
			border-top: 2rpx solid rgba(255,255,255,0.04);
		}
	}
</style>